<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head_css :: head(~{::title}, ~{::link}, ~{::style})">
    <meta charset="utf-8">
    <title>[[${moduleName}]]</title>
    <link rel="stylesheet" th:href="@{/weixin/css/photoswipe.css}">
    <link rel="stylesheet" th:href="@{/weixin/css/photoswipe-default-skin/default-skin.css}">
    <style>
        html,
        body {
            background-color: #efeff4;
        }

        .mui-h5 {
            font-size: 16px !important;
        }

        .mui-input-row .input-icon {
            width: 50%;
            float: left;
        }

        .mui-input-row a {
            margin-right: 10px;
            float: right;
            text-align: left;
            line-height: 1.5;
        }

        .mui-bar ~ .mui-content .mui-fullscreen {
            top: 44px;
            height: auto;
        }

        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }

        .mui-bar ~ .mui-pull-top-tips {
            top: 24px;
        }

        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }

        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }

        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }

        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }

        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }

        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }

        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mui-pull-top-canvas canvas {
            width: 40px;
        }

        .mui-slider-indicator.mui-segmented-control {
            background-color: #efeff4;
        }

        .like-box {
            text-align: right;
            margin: 10px 20px;
        }
        .heart {
            width: 24px;
            vertical-align: middle;
            margin-right: 10px;
        }
        .star {
            width: 24px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav" th:style="${nav.isUniWebview ? 'display:none' : ''}">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a class="mui-icon mui-pull-right mui-a-color"></a>
    <h1 class="mui-title">[[${moduleName}]]</h1>
</header>
<div class="mui-content">
    <!--<div id="slider" class="mui-slider mui-fullscreen">-->
        <div id="sliderSegmentedControl"
             class="mui-segmented-control">
            <div id="tabTitle">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    查看详情
                </a>
            </div>
        </div>
        <div id="tabContent">
            <div id="item1mobile" class="mui-control-content mui-active">
                <div id="scroll1">
                    <div id="formDetailScroll">
                        <ul class="mui-table-view" id="formDetail">
                        </ul>
                        <div th:if="${likeMode==1}" class="like-box">
                            <img id="imgGiveLike" class="heart" src="../../static/images/give_like.svg">
                            <span id="count"></span>
                        </div>
                        <div th:if="${likeMode==2}" class="like-box">
                            <img class="star star-count5" val="5" src="../../static/images/star.svg">
                            <img class="star star-count5" val="5" src="../../static/images/star.svg">
                            <img class="star star-count5" val="5" src="../../static/images/star.svg">
                            好评
                            <span id="count5" class="star-count"></span>
                            <img class="star star-count3" val="3" src="../../static/images/star.svg">
                            <img class="star star-count3" val="3" src="../../static/images/star.svg">
                            中评
                            <span id="count3" class="star-count"></span>
                            <img class="star star-count1" val="1" src="../../static/images/star.svg">
                            差评
                            <span id="count1" class="star-count"></span>
                        </div>
                    </div>
                    <div th:if="${isReplyEnabled}" class="annex-group">
                        <div class="reply-form" style="margin-bottom:10px">
                            <!--<label><span>回复</span><span style='color:red;'>*</span></label>
                            <div style="text-align:center">
                                <textarea id="content" name="content" placeholder="请输入回复内容"
                                          style="width:96%; height:150px;"></textarea>
                            </div>-->
                            <form class="mui-input-group" id="module_form">
                            </form>
                            <!--<div class="mui-button-row">
                                <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn-ok">确定</button>
                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!--</div>-->
</div>
<script type="text/javascript" th:src="@{/weixin/js/uniapps.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/jweixin-1.6.0.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/visual/mui_module.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/photoswipe.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/photoswipe-ui-default.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/photoswipe-init-manual.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/macro/open_window_macro.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/visual/module_list.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/macro/macro.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/utils.js}"></script>
<script th:inline="javascript">
    // 会导致pullRefresh初始化失败
    // mui.init();

    var isUniWebview = [[${nav.isUniWebview}]];

    console.log('mui.os.plus', !mui.os.plus);
    if(!mui.os.plus) {
        // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
        setTimeout(function() {
            jQuery('.mui-bar').remove();
        }, 100);
        console.log('remove mui-bar');
    }
    else {
        // 如果是通过uniapp的webview载入
        if (isUniWebview) {
            jQuery('.mui-bar').remove();
        }
    }

    // 注册beforeback方法，以使得在流程处理完后退至待办列表页面时能刷新页面
    if (isUniWebview) {
        mui.init({
            keyEventBind: {
                backbutton: false // 关闭back按键监听
            }
        });
    }

    var moduleCode = [[${moduleCode}]];
    var id = [[${id}]];

    mui.ready(function () {
        // 阻尼系数，越小越灵敏
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        mui('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });

        var skey = [[${nav.skey}]];
        var options = {
            "skey": skey,
            "moduleCode": moduleCode,
            "id": id,
            "ulSelector": "#formDetail",
            "isTab": [[${isTab}]]
        };
        var content = document.querySelector('.mui-content');
        console.log('options', options);
        window.ModuleForm = new mui.ModuleForm(content, options);
        window.ModuleForm.moduleDetail();
    });
</script>
<script th:src="@{'/weixin/flow/form_js/' + ${formCode} + '.jsp?pageType=showModule&id=' + ${id}}"></script>
<div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
<script th:inline="javascript">
    $(function() {
        var isPopupWin = [[${isPopupWin}]];
        if (isPopupWin) {
            $('#barBtnBack').remove();
        }
    })

    $(function () {
        watermark([[${realName}]]);
    });

    $(function () {
        var content = document.querySelector('.mui-content');
        var skey = [[${nav.skey}]];
        var moduleCode = [[${formCode}]];

        var formCodeRelated = [[${replyModule}]];
        var parentId = [(${id})];
        var isUniWebview = true;
        // 来自于按钮的添加模块事件
        var curModuleCode = [[${replyModule}]]
        var options = {
            "skey": skey,
            "moduleCode": moduleCode,
            "id": 0,
            "formCodeRelated": formCodeRelated,
            "pageType": "add_relate",
            "parentId": parentId,
            "isUniWebview": isUniWebview
        };
        options.extraData = '{}';
        window.ModuleForm = new mui.ModuleForm(content, options);
        window.ModuleForm.moduleInit();
    });

    $(function() {
        var likeCount = [(${likeCount})];
        var count = likeCount.count;
        var myCount = likeCount.myCount;
        var myVal = likeCount.myVal;

        var count5 = likeCount.count5;
        var count3 = likeCount.count3;
        var count1 = likeCount.count1;
        $('#count5').html(count5);
        $('#count3').html(count3);
        $('#count1').html(count1);
        if (count5 > 0) {
            $('.star-count5').attr('src', '../../static/images/star_light.svg');
        }
        if (count3 > 0) {
            $('.star-count3').attr('src', '../../static/images/star_light.svg');
        }
        if (count1 > 0) {
            $('.star-count1').attr('src', '../../static/images/star_light.svg');
        }

        [# th:if="${likeMode == 1}"]
            $('#count').html(count);
            if (myCount > 0) {
                $('#imgGiveLike').attr('src', '../../static/images/give_like_light.svg');
            }
        [/]

        $('#imgGiveLike').click(function() {
            $.ajax({
                url: "../../model/giveLike",
                type: "post",
                data: {
                    moduleCode: [[${moduleCode}]],
                    mode: [(${likeMode})],
                    moduleId: [[${id}]],
                    val: 0,
                },
                dataType: "json",
                beforeSend: function (XMLHttpRequest) {
                },
                success: function (res, status) {
                    console.log('res', res);
                    if (res.code == 200) {
                        var likeMode = [(${likeMode})];
                        var data = res.data;
                        if (data.isGiveLike) {
                            count += 1;
                            $('#imgGiveLike').attr('src', '../../static/images/give_like_light.svg');
                            mui.toast('点赞成功');
                        } else {
                            count -= 1;
                            $('#imgGiveLike').attr('src', '../../static/images/give_like.svg');
                            mui.toast('取消点赞');
                        }
                        $('#count').html(count);
                    } else {
                        mui.toast(data.msg);
                    }
                },
                complete: function (XMLHttpRequest, status) {
                    console.log(status);
                },
                error: function (XMLHttpRequest, textStatus) {
                    console.error(textStatus);
                }
            });
        });

        $('.star').click(function() {
            var val = $(this).attr('val');
            $.ajax({
                url: "../../model/giveLike",
                type: "post",
                data: {
                    moduleCode: [[${moduleCode}]],
                    mode: [(${likeMode})],
                    moduleId: [[${id}]],
                    val: val,
                },
                dataType: "json",
                beforeSend: function (XMLHttpRequest) {
                },
                success: function (res, status) {
                    console.log('res', res);
                    if (res.code == 200) {
                        var likeMode = [(${likeMode})];
                        var data = res.data;

                        if (data.hasOwnProperty('isGiveLike') && !data.isGiveLike) {
                            myVal = 0;
                            if (val == 1) {
                                $('.star-count1').attr('src', '../../static/images/star.svg');
                                count1--;
                            } else if (val == 3) {
                                count3--;
                                $('.star-count3').attr('src', '../../static/images/star.svg');
                            } else {
                                count5--;
                                $('.star-count5').attr('src', '../../static/images/star.svg');
                            }
                            mui.toast('取消点评');
                        } else {
                            myVal = val;

                            if (val == 1) {
                                $('.star-count1').attr('src', '../../static/images/star_light.svg');
                                count1++;
                                $('#count1').html(count1);
                            } else if (val == 3) {
                                $('.star-count3').attr('src', '../../static/images/star_light.svg');
                                count3++;
                                $('#count3').html(count3);
                            } else {
                                $('.star-count5').attr('src', '../../static/images/star_light.svg');
                                count5++;
                                $('#count5').html(count5);
                            }

                            let oldVal = data.oldVal;
                            if (oldVal > 0) {
                                if (oldVal == 1) {
                                    count1--;
                                    $('#count1').html(count1);
                                    $('.star-count1').attr('src', '../../static/images/star.svg');
                                } else if (oldVal == 3) {
                                    count3--;
                                    $('#count3').html(count3);
                                    $('.star-count3').attr('src', '../../static/images/star.svg');
                                } else {
                                    count5--;
                                    $('#count5').html(count5);
                                    $('.star-count5').attr('src', '../../static/images/star.svg');
                                }
                            }
                            mui.toast('点评成功');
                        }
                    } else {
                        mui.toast(data.msg);
                    }
                },
                complete: function (XMLHttpRequest, status) {
                    console.log(status);
                },
                error: function (XMLHttpRequest, textStatus) {
                    console.error(textStatus);
                }
            });
        });

        $('.star-count').click(function() {
            uni.navigateTo({
                url: `/application/moduleList?record=${JSON.stringify({code: 'give_like', mainModuleCode: moduleCode, moduleId: id})}`
            });
        })
    })
</script>
</body>
</html>